<script lang="ts" setup>
import { useTagsViewStore } from '@/store';
import BaseProForm from './components/base-pro-form.vue';
import ColProForm from './components/col-pro-form.vue';
import SlotProForm from './components/slot-pro-form.vue';
import TextProForm from './components/text-pro-form.vue';
import SelectDemo from './components/select-demo.vue';

import { useFormConfig } from './hooks/use-basic-config';

const statusList = [
  { label: '启用', value: '1', color: 'primary' },
  { label: '禁用', value: '0', color: 'danger' },
];

const status = ref('1');

const { formConfig, formData } = useFormConfig();

// const isEdit = ref(true);

const route = useRoute();

const tagsViewStore = useTagsViewStore();

const handleClose = () => {
  tagsViewStore.closeCurrentView();
};

const isEdit = computed(() => (route.name as string)?.toUpperCase()?.includes('EDIT'));

const activeName = ref('select');
</script>

<template>
  <AppPage>
    <template #main>
      <PageCard>
        <el-row justify="center">
          <el-text size="large" tag="b">AppPage详情</el-text>
          <StatusLabel :value="status" :options="statusList" />
          <StatusLabel value="0" :options="statusList" mode="tag" />
          <StatusLabel :value="status" :options="statusList" dot />
          <el-switch v-model="isEdit" inline-prompt active-text="编辑" inactive-text="禁用" />

          <el-button @click="handleClose">关闭当前页面</el-button>
        </el-row>
        <div class="w-full mt-20px">
          <ProForm
            :config="formConfig"
            :model="formData"
            labelWidth="100"
            :disabled="!isEdit"
            :col="{
              md: 8,
              lg: 6,
            }"
          />
        </div>
      </PageCard>
      <PageCard title="表单">
        <ProTabs v-model="activeName" class="tabs-round">
          <el-tab-pane label="下拉选择" name="select">
            <SelectDemo />
          </el-tab-pane>
          <el-tab-pane label="基础表单" name="base">
            <BaseProForm />
          </el-tab-pane>
          <el-tab-pane label="栅栏表单" name="col">
            <ColProForm />
          </el-tab-pane>
          <el-tab-pane label="插槽表单" name="slot">
            <SlotProForm />
          </el-tab-pane>
          <el-tab-pane label="默认表单" name="text">
            <TextProForm />
          </el-tab-pane>
        </ProTabs>
      </PageCard>
      <PageCard title="描述表格">
        <el-descriptions title="UserInfo" border :column="4">
          <template #extra>
            <el-button type="primary">编辑</el-button>
          </template>
          <el-descriptions-item label="name">{{ formData.name }}</el-descriptions-item>
          <el-descriptions-item label="age">{{ formData.attrs.age }}</el-descriptions-item>
          <el-descriptions-item label="phone">{{ formData.attrs.phone }}</el-descriptions-item>
          <el-descriptions-item label="sex">{{ formData.attrs.sex }}</el-descriptions-item>
        </el-descriptions>
      </PageCard>
    </template>
  </AppPage>
</template>
